<!DOCTYPE html>
<html>

<head>
    <title>{{.room.Name}} - {{.room.Number}}</title>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
</head>

<body>

    <div class="container">
        <div class="text-justify container text-secondary">
            <div class="col-sm-10 ">
                <h3>{{.room.Name}} - {{.room.Number}} <span style="float: right"><a href="/rooms">返回聊天室列表</a></span></h3>
                <div class="panel panel-default panel-body box-show" id="messages" style="height: 600px;overflow:auto;">
                    {{range $k,$v := .logs}}
                        {{if eq $v.Type 1}}
                            <div class="panel panel-default panel-body box-show" style="font-size: 20px">
                                <div class="col-sm-2" style="text-align: right"><span style="color: #2e6da4;font-weight: bold">{{$v.UserName}}</span> 说：</div>
                                <div class="col-sm-7">{{$v.Message}}</div>
                                <div class="col-sm-3" style="font-size: 10px;text-align: right;line-height: 10px"><br/>{{$v.Time}}</div>
                            </div>
                        {{else}}
                            <p style="text-align: center;color: RGB(43,162,69)">{{$v.UserName}} {{$v.Message}} {{$v.Time}}</p>
                        {{end}}
                    {{end}}
                </div>
                <form role="form">
                    <div class="form-group">
                        <textarea class="form-control sendMessage" rows="3" id="sendMessage"></textarea>
                    </div>
                    <a class="btn btn-default" onclick="sendMessage()">发送</a> <span>Ctrl + Enter 快捷发送</span>
                </form>
            </div>
            <div class="col-sm-2 ">
                <h3>房间人数： <span id="user_num">{{.userNum}}</span></h3>
                <div class="panel panel-default panel-body box-show" id="users">
                    {{range $k,$v := .roomHasUser}}
                        <p id="user{{$v.UserId}}">{{$v.UserName}}</p>
                    {{end}}

                </div>
            </div>
        </div>
    </div>
</body>
<style type="text/css">
.tkfx {
    position: absolute;
    transform: rotate(-90deg);
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var ws;

var room = {{.room.Number}};
var name = {{.name}};
var user_num = {{.userNum}}

ws = new WebSocket("ws://"+{{.wshost}}+{{.wsport}}+"/ws/"+room+"?name="+name);
//连接打开时触发
ws.onopen = function(evt) {

};
//接收到消息时触发
ws.onmessage = function(evt) {
    var data = JSON.parse(evt.data)
    addMessageToPanel(data)
};
//连接关闭时触发
ws.onclose = function(evt) {};
// 发送消息
function sendMessage(){
    ws.send($('.sendMessage').val())
    $('.sendMessage').val("")
}

function addMessageToPanel(message){
    var type = message.type
    var h = ''
    if(type == '1'){
        h = `<div class="panel panel-default panel-body box-show" style="font-size: 20px">
        <div class="col-sm-2" style="text-align: right"><span style="color: #2e6da4;font-weight: bold">`+message.name+`</span> 说：</div>
        <div class="col-sm-7">`+message.message+`</div>
        <div class="col-sm-3" style="font-size: 10px;text-align: right;line-height: 10px">`+message.time+`</div>
        </div>`
    }else{
        h = `<p style="text-align: center;color: RGB(43,162,69)">` + message.name + ` ` +message.message + ` ` +message.time + `</p>`
        if(type == '2'){
            console.log('增加')
            $("#users").append('<p id="user'+message.id+'">'+message.name+'</p>')
            user_num++
            $('#user_num').html(user_num)
        }else{
            console.log('删除' + "#user"+message.id)
            user_num--
            $('#user_num').html(user_num)
            $("#user"+message.id).remove();
        }
    }
    $("#messages").append(h)
    downMessage()
}
function downMessage() {
    $('#messages').scrollTop( $('#messages')[0].scrollHeight);
}

downMessage()
$(function() {
    $('#sendMessage').keypress(function(event){
        if(event.ctrlKey && event.keyCode == '10') {
            sendMessage()
        }
    });
})
</script>

</html>